<template>
  <div class="approval-record-timeline" v-loading="loading">
    <div class="timeline-header" v-if="showHeader">
      <slot name="header">
        <h3>{{ title }}</h3>
      </slot>
    </div>
    
    <div class="timeline-body">
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in records"
          :key="index"
          :type="getTaskTimelineItemType(item.child)"
          class="timeline-item"
        >
          <p class="task-title">
            {{ item.stepName }}
            <span v-if="item.auditRule" class="audit-rule">({{ item.auditRule }})</span>
          </p>
          
          <approval-record-item :item="item" />
          
        </el-timeline-item>
      </el-timeline>
    </div>
    
    <div class="timeline-footer" v-if="$slots.footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import ApprovalRecordItem from './ApprovalRecordItem.vue';

defineOptions({ name: 'ApprovalRecordTimeline' });

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '审批记录'
  },
  showHeader: {
    type: Boolean,
    default: true
  },
  records: {
    type: Array,
    required: true
  }
});

/** 获得任务对应的颜色 */
const getTaskTimelineItemType = (item) => {
  if (item && item.length > 0) {
    //判断子流程中的状态，当子流程存在item.StateID === '2'时流程状态为失败
    if (item.find(item1 => item1.StateID === '2')) {
      return 'danger'
    }
    else if (item.find(item1 => item1.StateID === '1')) {
      return 'success'
    }
    else
      return 'primary'
  } else {
    return ''
  }
}

const emit = defineEmits(['refresh']);

const refresh = () => {
  emit('refresh');
}
</script>

<style scoped>
.approval-record-timeline {
  width: 100%;
}

.timeline-header {
  margin-bottom: 20px;
}

.timeline-body {
  padding: 0 10px;
}

.timeline-footer {
  margin-top: 20px;
}

.task-title {
  font-weight: 700;
  margin-bottom: 12px;
}

.audit-rule {
  font-size: 0.9em;
  color: #606266;
  font-weight: normal;
}

.timeline-item {
  position: relative;
}
</style>